$(function () {
    chart_line.setOption(option);
    loadEnterprise(1);
});

/*加载设备历史数据*/
function loadHistoryData(sta) {
    if (!sta) {
        $('#type_id').val(2);
    }
    $('#chek_list').empty();
    if (oneMonthLimit($('#searchTimeBegin').val(), $('#searchTimeEnd').val())) {
        showModalHint("none", "请将时间范围控制在30天内");
        return;
    }
    showLoading(LOADING);
    chartNoDataHintHide($('#chart_line'));
    $('#chek_list').html('');
    chart_line.clear();
    chart_line.setOption(option);
    let params = $('#param_id').serialize();
    getJson("/historyData/getHistoryDataByParamTest",params,'GET',function (data) {
        let c = '';
        let legendSelectedObj = {};
        var resData = data.payload;
        if (resData.data.length > 0) {//有数据
            let dimensions = [];//数据侧名称
            let lengend = [];//展示侧名称
            if(resData.isSimplex == 1){//单相
                dimensions = ['createTime', '总有功累计电量', '总无功累计电量', '总有功功率', '总无功功率', '电网频率',
                    'A相电压', 'A相电流', 'A相功率因数'];
                lengend = ['总有功累计电量', '总无功累计电量', '总有功功率', '总无功功率', '电网频率',
                    '电压', '电流', '功率因数'];
                if(resData.isHarmonic > 0){
                    dimensions.push('A相电压谐波畸变率', 'A相电流谐波畸变率');
                    lengend.push('电压谐波畸变率', '电流谐波畸变率');
                }
            } else{
                dimensions = ['createTime', '总有功累计电量', '总无功累计电量', '总有功功率', '总无功功率', '电网频率',
                    'A相有功电量', 'B相有功电量', 'C相有功电量', 'A相无功电量', 'B相无功电量', 'C相无功电量',
                    'A相有功功率', 'B相有功功率', 'C相有功功率', 'A相无功功率', 'B相无功功率', 'C相无功功率',
                    'A相电压', 'B相电压', 'C相电压', 'A相电流', 'B相电流', 'C相电流', 'A相功率因数', 'B相功率因数', 'C相功率因数'];
                if(resData.isHarmonic > 0){
                    dimensions.push('A相电压谐波畸变率', 'B相电压谐波畸变率', 'C相电压谐波畸变率',
                        'A相电流谐波畸变率', 'B相电流谐波畸变率', 'C相电流谐波畸变率');
                }
                lengend = dimensions.slice(1);
            }
            var series_content = [];
            for (let i = 0; i < lengend.length; i++) {
                series_content.push(Object.assign({
                    name: lengend[i]
                }, lineStyle));
                if(i == 0){
                    legendSelectedObj[lengend[i]] = true;
                    c += '<div class="custom-control custom-checkbox custom-control-inline">\n' +
                        '<input type="checkbox" class="custom-control-input legendStateSwitch" id="customCheck' + i + '" checked value="' + lengend[i] + '">\n' +
                        '<label class="custom-control-label" for="customCheck' + i + '">' + lengend[i] + '</label>\n' +
                        '</div>';
                }
                if(i > 0){
                    legendSelectedObj[lengend[i]] = false;
                    c += '<div class="custom-control custom-checkbox custom-control-inline">\n' +
                        '<input type="checkbox" class="custom-control-input legendStateSwitch" id="customCheck' + i + '" value="' + lengend[i] + '">\n' +
                        '<label class="custom-control-label" for="customCheck' + i + '">' + lengend[i] + '</label>\n' +
                        '</div>';
                }
            }
            $('#chek_list').html(c);
            chart_line.setOption({
                legend: {
                    selected: legendSelectedObj
                },
                series: series_content,
                dataset: {
                    dimensions: dimensions,
                    source: resData.data
                }
            });
            hideLoading();
        } else {
            chartNoDataHint($('#chart_line'));
            hideLoading();
        }
    })
}

$('#chek_list').delegate('.legendStateSwitch', 'change', function () {
    var value = this.checked;
    var name = $(this).val();
    value ? selectLengend(name) : unSelectLengend(name);
})

/*选中图例*/
function selectLengend(name) {
    chart_line.dispatchAction({
        type: 'legendSelect',
        name: name
    })
}

/*取消选中图例*/
function unSelectLengend(name) {
    chart_line.dispatchAction({
        type: 'legendUnSelect',
        name: name
    })
}

/*根据企业加载设备列表*/
function loadDeviceByEid(e, sta) {
    $("#device-list").empty();
    getJson("/device/getDeviceByEId", {"id": e},'GET',function (data) {
        for (let i = 0; i < data.length; i++) {
            $(new Option(data[i].name, data[i].id)).appendTo($("#device-list"));
        }
        if (sta) {
            loadHistoryData(sta);
        }
    })
}

/*加载企业信息下拉框*/
function loadEnterprise(e) {
    getJson("/enterprise/findEnterpriseS", null, 'GET', function (result) {
        if (result.code == 200) {
            let data = result.payload.data;
            for (let i = 0; i < data.length; i++) {
                $(new Option(data[i].name, data[i].id)).appendTo($("#company-list"));
                $(new Option(data[i].name, data[i].id)).appendTo($("#validationCustom06"));
            }
            loadDeviceByEid(data[0].id, e);
        } else {
            myAlert("提示", result.message);
        }
    })
}

var chart_line = echarts.init(document.getElementById('chart_line'));
/*var option = {//折线图
    color: ['#5B8FF9'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'line',
            lineStyle: {
                color: '#ddd'
            }
        }
    },
    grid: {
        top: 15,
        left: 0,
        right: 0,
        bottom: 0,
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        // data: increaseArr(24, 1),
        axisLine: {
            lineStyle: {
                color: '#ddd'
            }
        },
        axisLabel: {
            color: '#666'
        },
        axisTick: {
            lineStyle: {
                color: '#ddd'
            }
        },
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        axisLine: {
            show: false
        },
        axisLabel: {
            color: '#666'
        },
        axisTick: {
            show: false
        },
        splitLine: {
            lineStyle: {
                color: ['#eee'],
                type: 'dashed'
            }
        }
    },
    series: [{
        name: '参数',//选择参数时，设置为相应参数名
        type: 'line',
        // data: randomFun(24, 1000, 300, 1),
        //smooth: true,
        showSymbol: false,
        symbolSize: 12,
        lineStyle: {
            width: 4,
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#42BBF6' // 0% 处的颜色
                }, {
                    offset: 1, color: '#1677FF' // 100% 处的颜色
                }]
            },
            shadowBlur: 5,
            shadowColor: 'rgba(22,119,255,0.2)',
            shadowOffsetY: 10
        },
        areaStyle: {
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: 'rgba(22,119,255,0.2)' // 0% 处的颜色
                }, {
                    offset: 1, color: 'rgba(66,187,246,0)' // 100% 处的颜色
                }]
            }
        }
    }]
};*/
var option = {//折线图
    color: ['#C6F694', '#8F74FF', '#FFB214', '#1362FF', '#FB7D1B'],
    legend: {
        show: false,
        selectedMode: false
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'line',
            lineStyle: {
                color: '#ddd'
            }
        }
    },
    grid: {
        top: 15,
        left: 50,
        right: 50,
        bottom: 0,
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: true,
        axisLine: {
            lineStyle: {
                color: '#ddd'
            }
        },
        axisLabel: {
            color: '#666'
        },
        axisTick: {
            lineStyle: {
                color: '#ddd'
            }
        },
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        axisLine: {
            show: false
        },
        axisLabel: {
            color: '#666'
        },
        axisTick: {
            show: false
        },
        splitLine: {
            lineStyle: {
                color: ['#eee'],
                type: 'dashed'
            }
        }
    },
    dataset: {
        source: []
    },
    series: []
};
var lineStyle = {
    type: 'line',
    showSymbol: false
};